<template>
  <view class="container">
    <s-nav-bar />
    <view class="container-main" flex flex-col>
      <uv-button
        type="primary"
        text="useLoading"
        @click="handleUseLoading"
      ></uv-button>
      <view class="h-20px"></view>
      <uv-button
        type="primary"
        text="useModal"
        @click="handleUseModal"
      ></uv-button>
      <view class="h-20px"></view>
      <uv-button
        type="primary"
        text="useToast"
        @click="handleUseToast"
      ></uv-button>
      <view class="h-20px"></view>
      <uv-button
        type="primary"
        text="useNetwork"
        @click="handleUseNetwork"
      ></uv-button>
      <view class="h-20px"></view>
      <uv-button
        type="primary"
        text="useStorage"
        @click="handleUseStorage"
      ></uv-button>
      <view class="h-20px"></view>
      <uv-button
        type="primary"
        text="useStorageSync"
        @click="handleUseStorageSync"
      ></uv-button>
    </view>
  </view>
</template>

<script setup>
import {
  useLoading,
  useModal,
  useToast,
  useNetwork,
  useStorage,
  useStorageSync,
} from "@uni-helper/uni-use";
const handleUseLoading = () => {
  const { showLoading, hideLoading } = useLoading({
    /* 传入配置 */
    // https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading
  });

  showLoading({
    title: "Loading...",
  }); // 显示加载提示框

  setTimeout(() => {
    hideLoading(); // 隐藏加载提示框
  }, 2000);
};

const handleUseModal = () => {
  const showModal = useModal({
    /* 传入配置 */
    // https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal
  });
  showModal({
    title: "标题",
    content: "内容",
  }); // 显示模态弹窗
};

const handleUseToast = () => {
  const showToast = useToast({
    /* 传入配置 */
    // https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast
  });
  const hideToast = showToast({ title: "内容", icon: "none" }); // 显示消息提示框
  setTimeout(() => {
    hideToast(); // 隐藏消息提示框
  }, 2000);
};

const handleUseNetwork = () => {
  console.log(useNetwork());
  // const {
  //   type,
  //   isWifi,
  //   is2g,
  //   is3g,
  //   is4g,
  //   is5g,
  //   isEthernet,
  //   isUnknown,
  //   isOnline,
  //   isOffline,
  // } = useNetwork();
  // console.log(
  //   type.value,
  //   isWifi.value,
  //   is2g.value,
  //   is3g.value,
  //   is4g.value,
  //   is5g.value,
  //   isEthernet.value,
  //   isUnknown.value,
  //   isOnline.value,
  //   isOffline.value
  // );
};

const handleUseStorage = () => {
  const token = useStorage("authorization", "");
  // 赋值
  token.value = "authorization-token";
  // 读取
  console.log(token.value); // authorization-token
};
const handleUseStorageSync = () => {
  const token = useStorageSync("authorizationSync", "");
  // 赋值
  token.value = "authorizationSync-token";
  // 读取
  console.log(token.value); // authorization-token
};
</script>

<style lang="scss" scoped></style>
